<template>
  <el-col>
    <el-dialog title="增加" :visible.sync="addDialogVisible" :before-close="handleCloseAddDialog">
      <el-form ref="medicineInfo" :model="medicineInfo" lable-width="100px">
        <el-form-item label="医院名" prop="hospitalId" v-if="hospitalId === 'null'">
          <el-select v-model="medicineInfo.hospitalId" placeholder="医院">
            <el-option v-for="(item, index) in hospitalList" :key="index" :value="item.hospitalId"
              :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="药品名" prop="name">
          <el-input v-model="medicineInfo.name" />
        </el-form-item>
        <el-form-item label="库存" prop="inventory">
          <el-input-number v-model="medicineInfo.inventory"></el-input-number>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input-number v-model="medicineInfo.price" :step="0.1"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseAddDialog">取 消</el-button>
        <el-button type="primary" @click="handleConfirmAddDialog">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="更新" :visible.sync="updateDialogVisible" :before-close="handleCloseUpdateDialog">
      <el-form ref="medicineInfo" :model="medicineInfo" label-width="100px">
        <el-form-item label="医院名" prop="hospitalId" v-if="hospitalId === 'null'">
          <el-select v-model="medicineInfo.hospitalId" placeholder="医院">
            <el-option v-for="(item, index) in hospitalList" :key="index" :value="item.hospitalId"
              :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="药品名" prop="name">
          <el-input v-model="medicineInfo.name" />
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input-number v-model="medicineInfo.price" :step="0.1"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseUpdateDialog">取 消</el-button>
        <el-button type="primary" @click="handleConfirmUpdateDialog">确 定</el-button>
      </span>
    </el-dialog>
    <el-row>
      <el-col :span="2">
        <el-button type="primary" @click="addDialogVisible = true">增加</el-button>
      </el-col>
      <el-col :span="2">
        <el-button :disabled="multipleSelection.length > 1" type="warning" @click="showUpdateDialogVisible">更新
        </el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="danger" @click="handleDeleteSelectIds">删除</el-button>
      </el-col>
      <el-col :span="5">
        <el-input v-model="query.name" type="text" />
      </el-col>
      <el-col :span="5" v-if="hospitalId === 'null'">
        <el-select v-model="query.hospitalId" placeholder="医院">
          <el-option v-for="(item, index) in hospitalList" :key="index" :value="item.hospitalId"
            :label="item.name"></el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-button @click="queryClear"> 清除 </el-button>
      </el-col>
      <el-col :span="2">
        <el-button @click="doSelectAll"> 搜索 </el-button>
      </el-col>
    </el-row>
    <el-table ref="multipleTable" :data="medicineList" style="width: 100%" row-key="medicineId" lazy
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="hospitalName" label="医院名"></el-table-column>
      <el-table-column prop="name" label="药品名称"></el-table-column>
      <el-table-column prop="inventory" label="存货"></el-table-column>
      <el-table-column prop="price" label="药品价格"></el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="total" @prev-click="currentChange"
      @next-click="currentChange" @current-change="currentChange" />
  </el-col>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      addDialogVisible: false,
      updateDialogVisible: false,
      menuDialogVisible: false,

      medicineId: 0,
      hospitalId: 0,

      medicineInfo: {
        hospitalId: this.hospitalId === "null" ? "" : this.hospitalId,
        name: "",
        inventory: "",
        price: "",
      },

      medicineList: [],
      hospitalList: [],

      page: 0,
      pageSize: 10,
      total: 0,

      query: {
        name: "",
        hospitalId: this.hospitalId === "null" ? "" : this.hospitalId,
      },

      multipleSelection: [],
    };
  },
  created() {
    this.hospitalId =
      localStorage.getItem("hospitalId") === "null"
        ? "null"
        : parseInt(localStorage.getItem("hospitalId"));
    if (this.hospitalId === "null") {
      this.doSelectAllHospital();
    } else {
      this.query.hospitalId = this.hospitalId;
    }
    this.doSelectAll();
  },
  methods: {
    currentChange(index) {
      this.page = index - 1;
    },
    showUpdateDialogVisible() {
      if (this.multipleSelection.length === 0) {
        this.$message.error("请选择");
        return;
      }
      this.medicineInfo = this.multipleSelection[0];
      this.updateDialogVisible = true;
    },

    showMenuDialogVisible(medicineId) {
      this.medicineId = medicineId;
      this.menuDialogVisible = true;
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    handleCloseAddDialog() {
      this.addDialogVisible = false;
      this.refresh();
    },

    handleConfirmAddDialog() {
      this.$refs.medicineInfo.validate((valid) => {
        if (valid) {
          this.addDialogVisible = false;
          this.$store
            .dispatch("medicine/addMedicine", this.medicineInfo)
            .then(() => { });
        }
      });
      this.refresh();
    },

    handleCloseUpdateDialog() {
      this.updateDialogVisible = false;
      this.refresh();
    },
    handleConfirmUpdateDialog() {
      this.$refs.medicineInfo.validate((valid) => {
        if (valid) {
          this.updateDialogVisible = false;
          this.$store
            .dispatch("medicine/updateMedicine", this.medicineInfo)
            .then(() => { });
        }
      });
      this.refresh();
    },

    handleCloseMenuDialog() {
      this.menuDialogVisible = false;
    },
    handleDeleteSelectIds() {
      const ids = [];
      for (const obj of this.multipleSelection) {
        ids.push(obj.medicineId);
      }
      this.$store.dispatch("medicine/deleteMedicine", ids).then(() => { });
      location.reload();
    },

    doSelectAll() {
      this.$store
        .dispatch("medicine/selectAllMedicine", {
          obj: {
            name: this.query.name,
            hospitalId: this.query.hospitalId != "" ? this.query.hospitalId : 0,
          },
          page: this.page,
          pageSize: this.pageSize,
        })
        .then((res) => {
          console.log(res)
          this.medicineList = res.list;
          this.total = res.total;
        });
    },
    doSelectAllHospital() {
      this.$store.dispatch("hospital/allId", {}).then((res) => {
        this.hospitalList = res;
      });
    },

    queryClear() {
      this.query = {
        name: "",
        hospitalId: this.hospitalId === "null" ? "" : this.hospitalId,
      };
      this.doSelectAll();
    },

    prevClick() {
      this.page -= 1;
      this.doSelectAll();
    },
    nextClick() {
      this.page += 1;
      this.doSelectAll();
    },

    refresh() {
      this.medicineInfo = {
        hospitalId: this.hospitalId === "null" ? "" : this.hospitalId,
        name: "",
        inventory: "",
        price: "",
      };
      this.doSelectAll();
      this.$refs.multipleTable.clearSelection();
    },
  },
};
</script>

<style scoped>
</style>